<template>
	<view class="navbox" :style="{height:`${obj.wh.navHeight}px`}">
		<view class="status" :style="{height:`${obj.wh.statusBarHeight}px`}"></view>
		<view class="navigation" :style="{height:`${obj.wh.navigationBarHeight}px`,width:`${obj.wh.custom.left}px`}">
			<image class="backicon" src="../../static/27.png" mode="aspectFill" @click="back"></image>
			<view class="rightbox flex-row-center">
				<image class="sericon" src="../../static/28.png" mode="aspectFill"></image>
				<input type="text" placeholder="关键字搜索" placeholder-style="color: #858585;" v-model="obj.value" @input="searchInput" />
			</view>
		</view>
	</view>
</template>

<script setup>
    import { reactive, getCurrentInstance,onMounted } from 'vue'
    let { proxy } = getCurrentInstance()
	
	let obj = reactive({
		wh: proxy.$c.getglobal(),
		value: ''
	})
	
	onMounted(()=>{
		
	})
	
	const searchInput=()=>{
		proxy.$emit('srarch',obj.value)
	}
	
	const back=()=>{uni.navigateBack({delta:1})}
	
</script>

<style lang="scss" scoped>
	.navbox{
		position: fixed;left: 0;top: 0;z-index: 99;
		width: 100vw;
		background: #fff;
		.status{width: 100vw;}
		.navigation{
			width: 100vw;
			padding: 0 30rpx;box-sizing: border-box;
			display: flex;flex-direction: row;align-items: center;
			.backicon{width: 34rpx;height: 34rpx;margin-right: 40rpx;transform: rotate(180deg);}
			.rightbox{
				flex: 1;height: 58rpx;border-radius: 58rpx;margin-right: 40rpx;background-color: #F4F4F4;
				padding: 0 30rpx;box-sizing: border-box;
				.sericon{width: 32rpx;height: 32rpx;margin-right: 10rpx;}
				input{flex: 1;height: 100%;}
			}
		}
	}
</style>